{% extends "dashboard/base.html" %}
{% load prices_i18n %}
{% load i18n %}
{% load materializecss %}
{% load staticfiles %}
{% load attributes %}

{% block title %}
  {% if product.pk %}
    {{ product }}
  {% else %}
    {% trans "Add new product" context "Product form page title" %}
  {% endif %}
   - {% trans "Products" context "Dashboard products list" %} - {{ block.super }}
{% endblock %}

{% block body_class %}body-products{% endblock %}

{% block menu_products_class %}active{% endblock %}

{% block header_menu %}
  {% url "dashboard:product-list" as url %}
  {% include "dashboard/includes/_back-link.html" with url=url %}
{% endblock %}

{% block breadcrumbs %}
  <ul class="breadcrumbs breadcrumbs--history">
    <li>
      <a href="{% url "dashboard:product-list" %}" class="breadcrumb">
        {% trans "Products" context "Dashboard products list" %}
      </a>
    </li>
    <li class="back-mobile">
      <a href="{% url "dashboard:product-list" %}">
        <svg data-src="{% static "dashboard/images/arrow_left.svg" %}" fill="#fff" width="20px" height="20px" />
      </a>
    </li>
    <li>
      <span class="breadcrumbs--ellipsed-item">
        {% if product.pk %}
          {{ product }}
        {% else %}
          {% trans "Add new product" context "Product form breadcrumbs" %}
        {% endif %}
      </span>
    </li>
  </ul>
{% endblock %}

{% block header_extra %}
  {% if product.pk %}
    <a class="dropdown-button right" href="#" data-activates="context-menu" data-constrainwidth="false">
      <svg data-src="{% static "dashboard/images/more_vert.svg" %}" height="24" width="24" />
    </a>
    <ul id="context-menu" class="dropdown-content">
      <li>
        <a href="{{ product.get_absolute_url }}" target="_blank">
          {% trans "View on site" context "Dashboard preview action" %}
        </a>
      </li>
      <li>
        <a href="#base-modal" data-href="{% url 'dashboard:product-delete' pk=product.pk %}"
        class="modal-trigger-custom">
          {% trans "Remove product" context "Product form action" %}
        </a>
      </li>
    </ul>
  {% endif %}
{% endblock %}

{% block menu_catalogue_class %} active{% endblock %}

{% block content %}
  {% if product.pk %}
    <div class="row">
      <div class="col s12">
        <ul class="tabs">
          <li class="tab col s3" role="presentation">
            <a href="#details" class="active" role="tab">
              <span>
                {% trans "Details" context "Product form tab" %}
              </span>
              <svg data-src="{% static "dashboard/images/edit.svg" %}" width="24" height="24" />
            </a>
          </li>
          {% if product.product_class.has_variants %}
            <li class="tab col s3" role="presentation">
              <a href="#variants" role="tab">
                <span>
                  {% trans "Variants" context "Dashboard variants" %}
                </span>
                <svg data-src="{% static "dashboard/images/style.svg" %}" width="24" height="24" />
              </a>
            </li>
          {% endif %}
          <li class="tab col s3" role="presentation">
            <a href="#stock" role="tab">
              <span>
                {% trans "Stock" context "Dashboard stock" %}
              </span>
              <svg data-src="{% static "dashboard/images/store.svg" %}" width="24" height="24" />
            </a>
          </li>
          <li class="tab col s3" role="presentation">
            <a href="#images" role="tab">
              <span>
                {% trans "Images" context "Product form tab" %}
              </span>
              <svg data-src="{% static "dashboard/images/collections.svg" %}" width="24" height="24" />
            </a>
          </li>
        </ul>
      </div>
    </div>
  {% endif %}
  <div class="tab-content" id="details">
    <div class="row">
      <div class="col m12 l9">
        <form method="post" class="card" id="form-product" enctype="multipart/form-data" novalidate>
          {% csrf_token %}
          <div class="card-content">
            <span class="card-title">
              {{ product.product_class }}
            </span>
            <div class="row">
              <div class="col s12 l8" >
                <div class="row">
                  {{ product_form.name|materializecss }}
                </div>
                {% for attribute_field in product_form.iter_attribute_fields %}
                  <div class="row">
                    {{ attribute_field|materializecss:"input-field s12" }}
                  </div>
                {% endfor %}
                <div class="row">
                  {{ product_form.description|materializecss }}
                </div>
              </div>
              <div class="col s12 l4">
                <div class="row">
                  {{ product_form.price|materializecss }}
                </div>
                {% if not product.product_class.has_variants %}
                  <div class="row">
                    {{ variant_form.sku|materializecss }}
                  </div>
                {% endif %}
                <div class="row">
                  {{ product_form.categories|materializecss }}
                </div>
                <div class="row">
                  {{ product_form.available_on|materializecss }}
                </div>
                <div class="row">
                  {{ product_form.is_featured|materializecss }}
                </div>
              </div>
            </div>
          </div>
          <div class="card-action right-align">
            {% if product.pk %}
              <a href="{% url 'dashboard:product-list' %}" class="btn btn-flat">
                {% trans "Cancel" context "Dashboard cancel action" %}
              </a>
              <button type="submit" class="btn waves-effect waves-light">
                {% trans "Update" context "Dashboard update action" %}
              </button>
            {% else %}
              <a href="{% url 'dashboard:product-list' %}" class="btn btn-flat">
                {% trans "Cancel" context "Dashboard cancel action" %}
              </a>
              <button type="submit" class="btn waves-effect waves-light">
                {% trans "Create" context "Dashboard create action" %}
              </button>
            {% endif %}
          </div>
        </form>
      </div>
      <div class="col m12 l3 help-box"></div>
    </div>
  </div>

  {% if product.pk  %}
    {% if product.product_class.has_variants %}
      <div id="variants" class="card tab-content">
        <form method="post" action="{% url 'dashboard:variant-bulk-delete' product_pk=product.pk %}" novalidate>
          {% csrf_token %}
          <div class="data-table-header-action">
            <a href="{% url 'dashboard:variant-add' product_pk=product.pk %}" class="btn-data-table btn-show-when-unchecked btn-flat">
              {% trans "Add" context "Dashboard add action" %}
            </a>
            <a href="#modal-product-variant-delete" class="modal-trigger btn-data-table btn-show-when-checked btn-flat" style="display:none" hidden>
              {% trans "Delete" context "Dashboard delete action" %}
            </a>

            <div class="modal" id="modal-product-variant-delete">
              <div class="modal-content">
                <h5>
                  {% trans "Are you sure?" context "Dashboard confirmation modal" %}
                </h5>
                <p>
                  {% blocktrans trimmed context "Modal delete variant from product text" %}
                    You are about to delete variants of this product.
                  {% endblocktrans %}
                </p>
              </div>
              <div class="modal-footer">
                <button type="submit" class="modal-action btn-flat">
                  {% trans "Delete" context "Dashboard delete action" %}
                </button>
                <a href="#!" class="modal-action modal-close btn-flat">
                  {% trans "Cancel" context "Dashboard cancel action" %}
                </a>
              </div>
            </div>
          </div>
          <div class="data-table-container">
            <table class="bordered highlight responsive data-table">
              {% if variants %}
                <thead>
                  <tr>
                    <th class="bulk-checkbox">
                      <input type="checkbox" id="select-all-variants" class="filled-in select-all switch-actions">
                      <label for="select-all-variants"></label>
                    </th>
                    <th>
                      {% trans "SKU" context "Product variant table header" %}
                    </th>
                    {% for attribute in attributes %}
                      <th>
                        {{ attribute.name|capfirst }}
                      </th>
                    {% endfor %}
                    <th class="wide">
                      {% trans "Variant name" context "Product variant table header" %}
                    </th>
                    <th class="right-align">
                      {% trans "Price" context "Product variant table header" %}
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {% for variant in variants %}
                    <tr data-action-go="{% url 'dashboard:variant-update' product_pk=product.pk variant_pk=variant.pk %}" title="{% trans "Edit variant" context "Product variant table link title" %}">
                      <td class="bulk-checkbox ignore-link">
                        <input id="id_variants_{{ variant.id }}" name="items" type="checkbox" value="{{ variant.id }}" class="filled-in switch-actions">
                        <label for="id_variants_{{ variant.id }}"></label>
                      </td>
                      <td>
                        {{ variant.sku }}
                      </td>
                      {% for attr_display in variant|attributes_values_with_empty:attributes %}
                        <td>
                          {{ attr_display }}
                        </td>
                      {% endfor %}
                      <td>
                        {{ variant.name }}
                      </td>
                      <td class="right-align">
                        {% gross variant.get_price_per_item html=True %}
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
              {% else %}
                  <tbody>
                    <tr>
                      <td>
                        <span>
                          {% trans "There are no variants for this product" context "Empty product variant table message" %}
                        </span>
                      </td>
                    </tr>
                  </tbody>
              {% endif %}
            </table>
          </div>
          <input type="hidden" name="success_url" value="{% url 'dashboard:product-update' pk=product.pk %}#variants">
        </form>
      </div>
    {% endif %}
    <div id="stock" class="card tab-content">
      <form method="post" action="{% url 'dashboard:stock-bulk-delete' product_pk=product.pk %}" novalidate>
        {% csrf_token %}
        <div class="data-table-header-action">
          <a href="{% url 'dashboard:product-stock-add' product_pk=product.pk %}" class="btn-data-table btn-show-when-unchecked btn-flat">
            {% trans "Add" context "Product form stock tab table action" %}
          </a>
          <a href="#modal-product-stock-delete" class="modal-trigger btn-data-table btn-show-when-checked btn-flat" style="display:none" hidden>
            {% trans "Delete" context "Dashboard delete action" %}
          </a>
          <div class="modal" id="modal-product-stock-delete">
            <div class="modal-content">
              <h5>
                {% trans "Are you sure?" context "Dashboard confirmation modal" %}
              </h5>
              <p>
                {% blocktrans trimmed context "Modal delete stock from variant text" %}
                  You are about to delete stock for this product variant.
                {% endblocktrans %}
              </p>
            </div>
            <div class="modal-footer">
              <button type="submit" class="modal-action btn-flat">
                {% trans "Delete" context "Dashboard delete action" %}
              </button>
              <a href="#!" class="modal-action modal-close btn-flat">
                {% trans "Cancel" context "Dashboard cancel action" %}
              </a>
            </div>
          </div>
        </div>
        <div class="data-table-container">
          <table class="bordered highlight responsive data-table">
            {% if stock_items %}
            <thead>
              <tr>
                <th class="bulk-checkbox">
                  <input type="checkbox" id="select-all-stock" class="filled-in select-all switch-actions">
                  <label for="select-all-stock"></label>
                </th>
                <th>
                  {% trans "SKU" context "Stock table header" %}
                </th>
                <th class="wide">
                  {% trans "Location" context "Stock table header" %}
                </th>
                <th class="right-align">
                  {% trans "Quantity" context "Stock table header" %}
                </th>
                <th class="right-align">
                  {% trans "Allocated" context "Stock table header" %}
                </th>
              </tr>
            </thead>
            <tbody>
              {% for item in stock_items %}
                <tr data-action-go="{% url 'dashboard:product-stock-update' product_pk=product.pk stock_pk=item.pk %}" title="{% trans "Edit variant" context "Stock table action" %}">
                  <td class="bulk-checkbox ignore-link">
                    <input name="items" type="checkbox" id="{{ item.id }}" class="filled-in switch-actions" value="{{ item.id }}">
                    <label for="{{ item.id }}"></label>
                  </td>
                  <td>
                    {{ item.variant.sku }}
                  </td>
                  <td>
                    {{ item.location }}
                  </td>
                  <td class="right-align">
                    {{ item.quantity }}
                  </td>
                  <td class="right-align">
                    {{ item.quantity_allocated }}
                  </td>
                </tr>
              {% endfor %}
            </tbody>
            {% else %}
              <tbody>
                <tr>
                  <td>
                    <span>
                      {% trans "There is no stock for this product." context "Empty stock table message" %}
                    </span>
                  </td>
                </tr>
              </tbody>
            {% endif %}
          </table>
        </div>
        <input type="hidden" name="success_url" value="{% url 'dashboard:product-update' pk=product.pk %}#stock">
      </form>
    </div>
    <div id="images" class="tab-content">
      <form action="{% url 'dashboard:product-images-upload' product_pk=product.pk %}" class="dropzone" id="product-image-form" novalidate>
        <div class="dz-message"></div>
        {% csrf_token %}
        <input type="hidden" name="success_url" value="{% url 'dashboard:product-update' pk=product.pk %}#images">
        <div class="row">
          {% if images %}
            <ul class="product-gallery" id="product-gallery" data-post-url="{% url 'dashboard:product-images-reorder' product_pk=product.pk %}">
              {% for image in images %}
                <li class="col s6 m3 product-gallery-item" data-id="{{ image.pk }}">
                  <div class="row">
                    <div class="card">
                      <div class="card-image product-gallery-item-image">
                        <img class="responsive-img" 
                             src="{{ image.image.crop.255x255 }}" 
                             srcset="{{ image.image.crop.255x255 }} 1x, {{ image.image.crop.510x510 }} 2x"
                             alt="">
                      </div>
                      <div class="card-content">
                        <span class="product-gallery-item-title card-title black-text" title="{{ image.alt }}">
                          {% if image.alt %}
                            {{ image.alt }}
                          {% else %}
                            <span class="grey-text">
                              {% trans "No description" context "Image card text" %}
                            </span>
                          {% endif %}
                        </span>
                      </div>
                      <div class="sortable__drag-area"></div>
                      <div class="card-action">
                        <a class="btn btn-flat" href="{% url 'dashboard:product-image-update' product_pk=product.pk img_pk=image.pk %}">
                          {% trans "Edit" context "Dashboard edit action" %}
                        </a>
                        <a href="#base-modal" class="btn btn-flat modal-trigger-custom" data-href="{% url 'dashboard:product-image-delete' product_pk=product.pk img_pk=image.pk %}">
                          {% trans "Delete" context "Dashboard delete action" %}
                        </a>
                      </div>
                    </div>
                  </div>
                </li>
              {% endfor %}
            </ul>
        {% else %}
          <p class="no-images">
            {% trans "This product has no images yet." context "Empty image gallery message" %}
          </p>
        {% endif %}
        <div class="col s6 m3 product-gallery-item dropzone-message">
          <div class="row">
            <span class="product-gallery-item-title product-gallery-item-title--noclip card-title black-text">
              <span class="grey-text hide-on-med-and-down">
                {% trans "Drop images here to upload" context "Image gallery upload box text" %}
              </span>
            </span>
          </div>
        </div>
      </div>
      </form>
      <script type="application/template" id="template">
        <li class="col s6 m3 product-gallery-item dz-preview dz-file-preview" data-id="{{ image.pk }}">
          <div class="row">
            <div class="card">
              <div class="card-image product-gallery-item-image">
                <img data-dz-thumbnail />
              </div>
              <div class="dz-progress">
                <span class="dz-upload" data-dz-uploadprogress></span>
              </div>
              <div class="card-content">
                <span class="product-gallery-item-title card-title black-text">
                  <span class="grey-text">
                    {% trans "No description" context "Empty image gallery message" %}
                  </span>
                </span>
              </div>
              <div class="sortable__drag-area"></div>
              <div class="card-action">
                <a class="card-action-edit" href="{% url 'dashboard:product-image-update' product_pk=product.pk img_pk=0 %}">
                  {% trans "Edit" context "Dashboard edit action" %}
                </a>
                <a href="#base-modal" class="card-action-delete modal-trigger-custom"
                data-href="{% url 'dashboard:product-image-delete' product_pk=product.pk img_pk=0 %}">
                  {% trans "Delete" context "Dashboard delete action" %}
                </a>
              </div>
            </div>
          </div>
        </li>
      </script>
    </div>
    <div class="fixed-action-btn">
      <a class="btn-fab btn-fab-hidden btn-floating btn-large waves-effect waves-light teal" id="images-btn" href="{% url 'dashboard:product-image-add' product_pk=product.pk %}" title="{% trans "Add image" context "Add image button text" %}">
        <svg data-src="{% static "dashboard/images/add.svg" %}" />
      </a>
    </div>
  {% endif %}
{% endblock %}
